<template>
  <view class="modal" v-if="show">
    <view class="modal-container">
      <view class="cuIcon-close" @tap="hideModal"></view>
      <form @submit="onSubmit">
        <view class="product">
          <div class="image"><image :src="info.thumb ? info.thumb[0].url : ''"></image></div>
          <view class="content">
            <view class="price">
              <view class="label">积分</view>
              <view class="number" v-text="info.scorePrice"></view>
              <view class="my-score">
                (我的积分:{{ state.user.userInfo.score }})
              </view>
            </view>
            <view class="ori-price">
              <view class="label">参考价</view>
              <view class="number" v-text="info.cashPrice"></view>
            </view>
          </view>
        </view>
        <!-- 输入手机号 -->
        <view class="input-mobile" v-if="info.virtualType === 1">
          <view class="content">
            <div class="image"><image src="/static/2d/images/address/phone01.png"></image></div>
            <view class="text"><input type="number" maxlength="11" v-model="formData.mobile" placeholder="请输入收获手机号" /></view>
          </view>
        </view>
       
        <!--  选择地址 -->
        <view class="select-address" v-else @tap="onClickSelectAddressModal(true)">
          <template v-if="addressIndex < 0 || !formData.addrId">
            <view class="content">
              <div class="image"><image src="/static/2d/images/address/list_ico1.png"></image></div>
              <view class="text">请选择地址</view>
            </view>
            <view class="cuIcon-right"></view>
          </template>
          <template v-else>
            <view class="cu-list menu-avatar">
              <view class="cu-item" @tap="$emit('event-click', $event)">
                <view class="cu-avatar round lg" style="background-image:url(/static/2d/images/address/list_ico1.png);"></view>
                <view class="content">
                  <view class="userinfo">
                    <view v-text="address[addressIndex].name"></view>
                    <view class="mobile" v-text="address[addressIndex].mobile"></view>
                  </view>
                  <view class="text-sm flex"><view class="text-cut" v-text="address[addressIndex].long_address"></view></view>
                </view>
              </view>
            </view>
          </template>
        </view>

        <!-- 选择数量 -->
        <view class="select-num" v-if="!info.virtualType">
          <view class="label">选择数量</view>
          <view class="content"><input-number v-model="formData.amount" :min="1"></input-number></view>
        </view>
        <view class="submit"><button form-type="submit" class="cu-btn round">确 定</button></view>
      </form>
    </view>

    <!-- 选择地址modal -->
    <view class="select-address-modal animated animation-slide-right" v-if="showSelectAddressModal">
      <view class="header">
        <view class="title">请选择地址</view>
        <view class="action"><view class="cuIcon-close" @tap="onClickSelectAddressModal(false)"></view></view>
      </view>
      <view class="content" :class="{ none: !address }" v-if="!address"><button @tap="go('/pages/uCenter/address/edit')" class="cu-btn">新增地址</button></view>
      <scroll-view scroll-y class="content" v-else>
        <view class="cu-list menu-avatar">
          <view class="cu-item" v-for="(item, index) in address" :key="index" @tap="onClickSelectAddress(index)">
            <view class="cu-avatar round lg" 
            style="background-image:url(/static/2d/images/address/list_ico1.png);"></view>
            <view class="content">
              <view class="userinfo">
                <view v-text="item.name"></view>
                <view class="mobile" v-text="item.mobile"></view>
              </view>
              <view class="text-sm flex"><view class="text-cut" v-text="item.long_address"></view></view>
            </view>
            <view class="action" v-if="formData.addrId === item.id"><view class="cuIcon-check"></view></view>
          </view>
        </view>

        <view class="btn-cogs">
          <button v-if="address.length > 0" class="cu-btn block bg-blue" @tap="onClickSelectAddressModal(false)">确 定</button>
          <button class="cu-btn bg-gray block" @tap="go('/pages/uCenter/address/edit')">新增地址</button>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import baseMixins from "@/utils/mixins";
import uniApp from "@/utils/uni-app";
import { isMobileNumber } from "@/utils";
import inputNumber from "@/components/inputNumber";

export default {
  mixins: [baseMixins],
  components: {
    inputNumber
  },
  data() {
    return {
      addressIndex: -1,
      address: [],
      showSelectAddressModal: false,
      formData: {
        id: this.info.id,
        amount: 1,
        mobile: process.env.NODE_ENV === "production" ? "" : 17602111591,
        addrId: 0
      }
    };
  },
  watch: {
    info: {
      deep: true,
      handler(n) {
        this.formData.id = n.id;
        this.$forceUpdate();
      }
    }
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    info: Object
  },
  mounted() {
    uni.$on("shop_onShow", () => {
      this.init();
    });
  },
  methods: {
    init() {
      return this.$api.user.address().then(_ => {
        this.address = _.data.data;
        return _;
      });
    },
    onClickSelectAddressModal(bool) {
      this.showSelectAddressModal = bool;
      if (bool) {
        this.init();
      }
    },
    onClickSelectAddress(index) {
      this.formData.addrId = this.address[index].id;
      this.addressIndex = index;
    },
    hideModal() {
      this.$emit("update:show", false);
    },
    onSubmit(e) {
      if (!this.info.virtualType) {
        if (this.formData.addId <= 0) {
          uniApp.alert("请选择收货地址");
          return false;
        }
      } else {
        if (!isMobileNumber(this.formData.mobile)) {
          uniApp.alert("请输入正确的手机号");
          return false;
        }
      }

      this.$api.good
        .exchange(this.formData)
        .then(_ => {
          uniApp.alert("兑换成功", () => {
            this.$emit("update:show", false);
            uni.navigateTo({
              url: "/pages/shop/orderRecord/detail?id=" + _.data.data.orderId
            });
          });
        })
        .catch(e => {
          uniApp.alert(e.message || e.data.msg || "兑换失败");
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.modal {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 200;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba($color: #000000, $alpha: 0.75);
  &-container {
    background-color: #f3f3f3;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    .cuIcon-close {
      position: absolute;
      right: 10upx;
      top: 10upx;
      font-size: 40upx;
      color: #cccccc;
    }
    .product {
      background-color: #ffffff;
      padding: 20upx;
      display: flex;
      align-items: center;
      .image {
        width: 160upx;
        height: 140upx;
        border-radius: 8upx;
        overflow: hidden;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .content {
        margin-left: 20upx;
        .price,
        .ori-price {
          display: flex;
          align-items: center;
          color: #9aa2af;
          .label {
            font-size: 28upx;
            line-height: 50upx;
          }
          .number {
            padding: 0 5upx;
            font-size: 24upx;
            line-height: 50upx;
          }
          .my-score{
            font-size: 20upx;
            color: #555555;
          }
        }
        .price {
          color: #000000;
        }
        .ori-price {
          .number {
            position: relative;
            text-decoration: line-through;
            &:before {
              content: "¥";
            }
          }
        }
      }
    }
    .select-address,
    .input-mobile {
      margin: 20upx auto;
      background-color: #ffffff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      >.content {
        display: flex;
        align-items: center;
        padding: 20upx 30upx;
        .image {
          width: 60upx;
          height: 60upx;
          margin-right: 30upx;
          image {
            width: 100%;
            height: 100%;
          }
        }
      }
      .cuIcon-right {
        font-size: 30upx;
        color: #0f86c3;
        margin-right: 30upx;
      }
    }
    .input-mobile .content {
      width: 100%;
      .text {
        width: calc(100% - 60upx);
        input {
          border: 1upx solid #eeeeee;
          border-radius: 10upx;
          height: 60upx;
          padding: 5upx 20upx;
          width: 100%;
          font-size: 24upx;
        }
      }
    }
    .select-num {
      padding: 20upx 30upx;
      background-color: #ffffff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .content {
        text-align: center;
        width: 200upx;
      }
    }
    .submit {
      margin: 20upx auto;
      text-align: center;
      .cu-btn {
        width: 80%;
        background-color: #ff8d1f;
        color: #ffffff;
      }
    }
  }
  .select-address-modal {
    background-color: #ffffff;
    height: 80%;
    width: 100%;
    bottom: 0;
    position: absolute;
    left: 0;
    right: 0;
    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: #0f86c3;
      color: #ffffff;
      padding: 10upx 20upx;
      height: 80upx;
    }
    > .content {
      height: calc(100% - 80upx);

      &.none {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .cuIcon-check {
        font-size: 40upx;
        color: #007aff;
      }
    }
    .btn-cogs {
      text-align: center;
      button {
        width: 85%;
        margin: 30upx auto;
      }
    }
  }
}

.cu-list {
  width: 100%;
  >.content {
    color: #3c3c3c;
    .userinfo {
      display: flex;
      align-items: flex-end;
    }
  }
  .mobile {
    font-size: 24upx;
    margin-left: 10upx;
    line-height: 24upx;
  }
}
</style>
